<template>
  <div class='container'>
    <el-dialog
      v-model="visible"
      :title="title"
      :width="width"
      :key="key"
      :destroyOnClose="destroyOnClose"
      :draggable="draggable"
      align-center
      v-bind="attrs"
      @closed="handleCancel"
    >
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">{{ cancelText }}</el-button>
          <el-button type="primary" @click="handleOk">
            {{ okText }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="BaseModal">
import { ref, useAttrs, computed } from "vue"
let prop = withDefaults(defineProps<{
  width?: string,
  cancelText?: string,
  okText?: string,
  visible: boolean,
  title: string,
  key?: string,
  draggable?: boolean,
  destroyOnClose?: boolean
}>(), {
  width: '40%',
  draggable: true,
  destroyOnClose: true,
  okText: '确定',
  cancelText: '取消',
  key: 'key1'
})


let emit = defineEmits(['handleOk', 'handleCancel'])

let handleCancel = () => {
  emit('handleCancel', false)
}

let handleOk = () => {
  emit('handleOk', false)
}

let attrs = useAttrs()

</script>

<style lang="less" scoped>
 .container {
 }
</style>
